<template>
    <div class="login-box">
        <div class="titel">行秋智能采购管理系统</div>
        <div class="box clearfix">
            <van-form @submit="LoginEvt">
                <van-cell-group inset>
                    <van-field
                    v-model="phone"
                    name="手机号"
                    label="手机号"
                    placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                    <van-field
                    v-model="vdtCode"
                    type="text"
                    name="验证码"
                    label="验证码"
                    placeholder="请输入验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]"
                    >
                    <template #button>
                        <van-button size="small" type="primary"  @click="getVdtEvt">发送验证码</van-button>
                    </template>
                    </van-field>

                </van-cell-group>
                <van-checkbox v-model="remPhone" checked-color="#f2995f">是否记住手机号？</van-checkbox>
                <van-checkbox v-model="autoLogin" checked-color="#f2995f">下次自动登录？</van-checkbox>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>
        </div>
        <div class="right">powered by xingqiu &copy;2022-12</div>
    </div>
</template>
<script setup>
import { enCode,deCode } from "../../utils";
import { onMounted ,ref } from "vue";
import { showSuccessToast, showFailToast } from 'vant';
import { commonDefinition } from "../../store/index";
import { useRouter } from "vue-router";
import { loginApi,getVdtApi,userInfoApi,userRoleApi } from "../../apis/loginApi";

const autoLogin = ref(false)
const remPhone = ref(false)
const phone = ref('')
const vdtCode = ref('')
let _router = useRouter()

/**如果保存了手机号↓ */
   let phoneNum = localStorage.getItem('user-phone')
   if(phoneNum){
        phone.value = deCode(phoneNum) 
        remPhone.value = true
   }

/**获取验证码 */
 function getVdtEvt() {
    /**校验手机号正确性 */
    if(!/^1[3-9]{1}[0-9]{9}$/g.test(phone.value)){
        showFailToast({
                message: '输入正确的手机号',
                position: 'bottom'
            })
        return
    }
   getVdtApi(phone.value).then((res)=>{
        if(res.code==200){
            showSuccessToast('验证码为'+res.data.vdtCode)
        }else{
            showFailToast('验证码获取失败，因为：'+res.message);
        }
   })
    
}

/**登录事件 */
 function LoginEvt() {

    loginApi({phone: phone.value,vdtCode: vdtCode.value}).then(async res=>{
        if(res.code==200){
            let str = enCode(res.data.token + '---' + Date.now())
            sessionStorage.setItem('login-token',str)
            commonDefinition().setToken(res.data.token)

            /**存储用户信息到菠萝 */
            let userInfo = await userInfoApi(res.data.id) 
            // console.log('userInfo',userInfo.data)
            commonDefinition().setUserInfo(userInfo.data)

            let userRights = await userRoleApi(userInfo.data.role)
            commonDefinition().setUserRights(userRights.data)

            /** 判断用户是否同意免登录和记住手机号，同意需要加密缓存，不同意需要删除之前保留的信息 */
            if (autoLogin.value) {
                localStorage.setItem('auto-login', enCode(res.data.token + '---' + Date.now()))
            } else {
                localStorage.removeItem('auto-login')
            }
            if (remPhone.value) {
                localStorage.setItem('user-phone', enCode(phone.value))
            } else {
                localStorage.removeItem('user-phone')
            }
            _router.push('/home')
        }else{
            showFailToast('登录失败，原因：' + res.message)
            return
        }
    })
}




</script>
<style lang="less">
@import '../../style/common.less';
    .clearfix::after{
        display: block;
        position: relative;
        content: '';
        clear: both;
        height: 0;
    }
    .login-box {
        display: block;
        position: relative;
        height: 100%;
        padding: 0 20px 0;

        >.titel{
            display: block;
            text-align: center;
            margin-top: 100px;
            font-size: 1.1rem;
            font-weight: bold;
            height: 42px;
            line-height: 42px;
            color: @b04;
            margin-bottom: 20px;
            // text-align: center;
            // text-shadow: 5px 5px 5px #d46b08;
            &::before{
                content: '';
                display: inline-block;
                vertical-align:middle;
                width: 40px;
                height: 40px;
                // padding-top: -15px;
                background: url(../../../public/favicon.png) center center / 40px 40px no-repeat;
            }
        }
        >.box{
            border-radius: 10px;
            background: @g00;
            padding: 10px 0;
        }
        >.right{
            display: block;
            margin-top: 180px;
            font-size: 0.8rem;
            text-align: center;
            color: @g05;
            // font-weight: bold;
        }
    }
    .van-field__label {
        width:70px;
    }
    .van-checkbox{
        // display: block;
        font-size: 0.8rem;
        color: @g04;
        // text-align: center;
        margin: 10px 0 10px 20px;
    }
    .van-checkbox__icon .van-icon {
        // display: block;
        box-sizing: border-box;
        width: 0.9rem;
        height: 0.9rem;
        
    }

</style>